<template>
    <div>
        <div>
            <ul class="flex flex-wrap my-4 overflow-wrap">
                <li class="px-2 py-1 bg-green-500 rounded text-white mx-2 my-2" v-for="(item,index) in oldlabel" :key="item.id" @click="addLabelarr(item.title,item.id)">{{item.title}}</li>
            </ul>

        </div>
        <div class="inputbox">
            <div class="arrbox">
                <div v-for="(item,index) in labelarr" :key="index" class="spanbox">
                    <span>{{item}}</span>
                    <i class="spanclose" @click="removeitem(index,item)"></i>
                </div>
                <input
                        placeholder="输入后回车"
                        size="5"
                        v-model="currentval"
                        @keyup.enter="addlabel"
                        class="input"
                        type="text"
                />
            </div>
        </div>

        <!-- 常用label展示 -->
        <div></div>
    </div>
</template>

<script>
  import {selectCaseData} from '@/api/api/requestLogin.js'     // 获取案件信息
  import {selectCaseLable} from "@/api/api/requestLogin.js";    // 查询标签接口
  import {updateCaseData} from '@/api/api/requestLogin.js'   // 修改页面信息
  export default {
    name: 'legal_basis',
    props: {
      parentarr: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        currentval: '',
        labelarr: [],
        oldlabel: [],
        label_case: []
      }
    },
    mounted () {
      this.getCaseLable();    // 获取标签
      this.getInfo();  // 获取本案标签
    },
    methods: {
      // 移除标签
      removeitem (index, item) {
        this.labelarr.splice(index, 1)
      },
      // input回车加入labelarr中 添加新标签
      addlabel () {
        let count = this.oldlabel.indexOf(this.currentval)
        if (count === -1) {
          this.labelarr.push(this.currentval)
        }
        this.currentval = ''
      },
      // 获取标签
      getCaseLable () {
        selectCaseLable().then((data) =>{
          // this.oldlabel = data.data.data;
          this.oldlabel = data.data.data;
        })
      },
      getInfo () {
        selectCaseData().then((data) => {
          this.labelarr = JSON.parse(data.data.label_case); // 标签格式摘要
          if(data.data.label_case == null) {
            this.labelarr = [{
              lid: ''
            }]
          };
        }).catch((data)=>{
          // this.$message.error(err);
          alert(data)
        });
      },
      addLabelarr (t,id) {   // 从标签池选择添加标签
        this.labelarr.push(t);
        this.label_case.push({json_label:id,type: 1});

        updateCaseData({json_label:id,type: 1}).then((data) =>{
          console.log(JSON.parse(data.config.data))
        })
      }
    }
  }
</script>

<style scoped lang="less">
    .inputbox {
        background-color: white;
        font-size: 12px;
        border: 1px solid #dcdee2;
        border-radius: 6px;
        margin-bottom: 18px;
        padding: 6px 1px 1px 6px;
        text-align: left;
        font-size: 0;
        margin-bottom: 0;
    }
    .input {
        font-size: 14px;
        border: none;
        box-shadow: none;
        outline: none;
        background-color: transparent;
        padding: 0;
        margin: 0;
        width: auto !important;
        max-width: inherit;
        min-width: 80px;
        vertical-align: top;
        height: 30px;
        color: #34495e;
        margin: 2px;
        line-height: 30px;
    }
    .arrbox {
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 6px 1px 1px 6px;
        text-align: left;
        font-size: 0;
    }
    .spanbox {
        line-height: 30px;
        margin: 2px;
        padding: 0 10px;
        background-color: #1abc9c;
        color: white;
        border-radius: 4px;
        font-size: 13px;
        cursor: pointer;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        overflow: hidden;
        transition: 0.25s linear;
    }
    .spanbox:hover {
        padding: 0px 17px 0 3px;
    }
    .spanclose {
        color: white;
        padding: 0 10px 0 0;
        cursor: pointer;
        font-size: 12px;
        position: absolute;
        right: -3px;
        text-align: right;
        text-decoration: none;
        top: 0;
        width: 100%;
        bottom: 0;
        z-index: 2;
        opacity: 0;
        filter: "alpha(opacity=0)";
        transition: opacity 0.25s linear;
        font-style: normal;
    }
    .spanbox:hover .spanclose {
        padding: 0 10px 5px 0;
        opacity: 1;
        -webkit-filter: none;
        filter: none;
    }
    .spanclose:after {
        content: "x";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 27px;
    }
</style>
